<template>
  <!-- 模板列表 -->
  <div class="templateList">
    <!-- 搜索 -->
    <SearchForm ref="searchFrom" :queryData="queryData" :queryItem="queryItem" :queryHandle="queryHandle"></SearchForm>
    <!-- table -->
    <div class="table">
      <!-- 列表 -->
      <TableList :tableData="tableData" :tableConfig="tableConfig" @selectAll="selectAll"
        @freshTableData="initQueryData">
        <template slot="进度" slot-scope="scope">
          <el-progress v-if="scope.row.seach < 25" :percentage="scope.row.seach" :text-inside="true" :stroke-width="20"
            status="exception">
          </el-progress>
          <el-progress v-else-if="scope.row.seach > 25 && scope.row.seach < 50" :percentage="scope.row.seach"
            :text-inside="true" :stroke-width="20" status="exception">
          </el-progress>
          <el-progress v-else-if="scope.row.seach > 50 && scope.row.seach < 75" :percentage="scope.row.seach"
            :text-inside="true" :stroke-width="20" status="warning">
          </el-progress>
          <el-progress v-else-if="scope.row.seach > 75" :percentage="scope.row.seach" :text-inside="true"
            :stroke-width="20">
          </el-progress>
          <el-progress v-else-if="scope.row.seach == 100" :percentage="scope.row.seach" :text-inside="true"
            :stroke-width="20" status="success">
          </el-progress>
        </template>
        <template slot="状态" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.status == 0">编辑中</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.status == 1">待审核</el-tag>
          <el-tag size="mini" type="warning" v-else-if="scope.row.status == 2">待发布</el-tag>
          <el-tag size="mini" type="info" v-else-if="scope.row.status == 3">已完成</el-tag>
        </template>
      </TableList>
    </div>

  </div>
</template>

<script>
import SearchForm from '@/commont/plugins/searchForm.vue'
import TableList from '@/commont/plugins/customTable.vue'
export default {
  name: "",
  components: { SearchForm, TableList },
  props: {},
  data() {
    let stateOption = [
      { label: '全部', value: "" },
      { label: '编辑中', value: 1 },
      { label: '审核通过', value: 3 },
      { label: '已发布', value: 5 },
      { label: '删除通过', value: 13 },
      { label: '已注销', value: 15 },
    ]
    return {
      computedHeight: 0, // 用于计算相关组件高度
      // 搜索
      queryData: {//刷选条件
        status: '',
        name: '',
        city: '',
        date: '',
        address: '',
        currentPage: 1,
        pageSize: 10
      },
      queryItem: [//筛选数据
        { type: 'Select', label: '状态', prop: 'status', options: stateOption },
        { type: 'Input', label: '姓名', prop: 'name' },
        { type: 'Input', label: '区域', prop: 'city' },
        // {type:'Date', label:'日期', prop:'date'}, //报错
        { type: 'Input', label: '住址', prop: 'address' },
      ],
      queryHandle: [//筛选按钮
        { label: '查询', type: 'primary', handle: this.initQueryData },
        {
          label: '重置', type: 'default', handle: param => {
            Object.assign(this.queryData, {
              status: '', name: '', city: '', date: '', address: '',
            })
          }
        }
      ],
      // 表格
      tableData: {
        columns: [
          { title: '姓名', prop: 'name', width: '110', align: 'center' },
          { title: '年龄', prop: 'age', width: '80', align: 'center' },
          { title: '性别', prop: 'sex', width: '70', align: 'center', formatter: this.formatter },
          { title: '日期', prop: 'date', width: '180', align: 'center' },
          { title: '区域', prop: 'city', width: '150', align: 'center' },
          { title: '地址', prop: 'address', width: '', align: 'left' },
          { title: '进度', type: 'slot', prop: 'seach', width: '200', align: 'center' },
          { title: '状态', type: 'slot', prop: 'status', width: '100', align: 'center', },
          {
            title: '操作', type: 'btn', width: '260', align: 'center',
            btns: [
              { label: '编辑', type: "primary", plain: 'plain', click: this.handleEdit, visible: false },
              { label: '预览', type: "success", plain: 'plain', click: this.handlePreview, visible: false },
              { label: '删除', type: "danger", plain: 'plain', click: this.handleDelete, visible: false },
            ],
          },
        ],
        mainBtn: {
          label: '创建模板',
          click: this.createdTemp,
          visible: true
        },
        loading: false,
        data: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        sizeOpts: [10, 20, 30, 40]
      },
      tableConfig: {
        typeName: 'multiple', //多选:multiple  单选:single  展开行:expand
      },
      checkData: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    // 动态设置子组件高度
    // this.computedHeight = this.$util.$resizeElementH(this.$refs.searchFrom);
    // let _this = this;
    // window.addEventListener('resize', function () {
    //   _this.computedHeight = _this.$util.$resizeElementH(_this.$refs.searchFrom);
    // });
    this.initQueryData();
  },
  updated() { },
  methods: {
    // 格式化
    formatter(row) {
      return row.sex == 1 ? '男' : '女';
    },
    // 创建模板
    createdTemp() {
      this.$router.push('createModel');
    },
    // 查询
    initQueryData(params) {
      this.tableData.data = [
        {
          id: '1',
          date: '2016-05-02 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '24',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          tag: '家',
          seach: 24,
          status: 0,
          update: 1,
        },
        {
          id: '2',
          date: '2016-05-04 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '24',
          sex: '2',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          tag: '公司',
          seach: 51,
          status: 1,
          update: 1,
        },
        {
          id: '3',
          date: '2016-05-01 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '24',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          tag: '家',
          seach: 60,
          status: 2,
          update: 0,
        },
        {
          id: '4',
          date: '2016-05-03 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '24',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          tag: '公司',
          seach: 98,
          status: 3,
          update: 1,
        }
      ]
      this.tableData.total = this.tableData.data.length;
    },
    // 编辑
    handleEdit(idx, item) {
      console.log('编辑', item);
    },
    // 预览
    handlePreview(idx, item) {
      console.log('预览', item);
    },
    // 删除
    handleDelete(idx, item) {
      console.log('删除', item);
    },
    // 多选
    selectAll(data) {
      console.log('多选', data);
    },
    // 输入
    getSeach(data) {
      console.log('输入', data);
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.templateList {
  width: 100%;
  height: 100%;

  .table {
    height: calc(100% - 100px);
  }
}
</style>